<template>
    <div>
      
      <form class="form-signin-password">
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
        <label for="inputEmail" class="sr-only">账号/手机号/邮箱</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="账号/手机号/邮箱" required="" v-model="ruleForm.userName">
        <br>
        <label for="inputPassword" class="sr-only">请输入密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="密码" required="" v-model="ruleForm.password">
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me" v-model="checked"> 记住我
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" @click="submitForm('ruleForm')">登录</button>
        <a href="#" target="_top" rel="nofollow" @click="GotoForget()">忘记密码</a>
        <a href="#" target="_top" rel="nofollow" style="position: center" @click="gotoregister()">免费注册</a>
      </form>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import topbar from '../../common/topbar.vue';
import headbar from '../../common/headbar.vue';
export default {
    data: function () {
        return {
            ruleForm: {
            userName: '', //用户名
            password: '' //密码
           },
           checked:false,
        }
    },
    methods: {
        ...mapMutations(['changeLogin']),
          //点击登录调用方法
        submitForm(formName) {
                //保存的账号
                var name=this.ruleForm.userName;
                //保存的密码
                var pass=this.ruleForm.password;
                if(name==''||name==null){
                alert("请输入正确的用户名");
                return
                }else if(pass==''||pass==null) {
                alert("请输入正确的密码");
                return
                }
                //判断复选框是否被勾选 勾选则调用配置cookie方法
                if(this.checked=true){
                //传入账号名，密码，和保存天数3个参数
                this.setCookie(name,pass,7);
                }
                //接口
                var url='myserver/user/login';
                this.$http.post(url,this.ruleForm,{emulateJSON:true})
                .then(res=>{
                if(res.body=="fail"){
                alert("用户名或密码错误,请重新输入");
                this.ruleForm.userName='';
                this.ruleForm.password='';
                return
                } else{
                alert("登陆成功！");
                this.$router.push("/home")  //?????
                }
            });
        },
        //设置cookie
        setCookie(c_name,c_pwd,exdays) {
            var exdate=new Date();//获取时间
            exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
            //字符串拼接cookie
            window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
            window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
            },
            //读取cookie
        getCookie:function () {
            if (document.cookie.length>0) {
            var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
            for(var i=0;i<arr.length;i++){
                var arr2=arr[i].split('=');//再次切割
                //判断查找相对应的值
                if(arr2[0]=='userName'){
                this.ruleForm.userName=arr2[1];//保存到保存数据的地方
                }else if(arr2[0]=='userPwd'){
                this.ruleForm.password=arr2[1];
                }
            }
          }
        },
        //清除cookie
        clearCookie:function () {
          this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了
        },
        gotoregister:function (){
            this.$router.push('/register')
        },
        GotoForget(){
            this.$router.push('/forget')
        }
    },
    mounted(){
     this.getCookie()
    },
    components:{
        topbar:topbar,
        headbar:headbar
    }
}
</script>

<style >
   .form-signin-password {
            width: 300px;
            position: absolute;
            top: 250px;
            left: 850px;
        }
</style>